<template>
  <div class="register">
    <div class="register__content">
      <!-- https://zaclee.net/vue/password-confirmation-validation-with-vue-and-vee-validate -->
      <div class="input__v">
        <input type="text"
               v-validate="'required|mobile'"
               name="mobile"
               v-model="param.phone"
               placeholder="请输入手机号"
               class="input__n input__clear">
        <div class="clear"
             @click="param.phone = ''"
             v-if="param.phone && param.phone.trim().length > 0"></div>
      </div>
      <div class="input__v msgcode">
        <input type="text"
               v-validate="'required|msgcode'"
               name="msgcode"
               v-model="param.code"
               placeholder="请输入短信验证码"
               class="register__content__msgcode">
        <button class="register__content__msgcodebtn"
                :disabled="(errors.has('mobile')||param.phone.length===0)||countDown.disabled"
                @click="sendmsg()">
          {{text}}
        </button>
      </div>
      <input type="text"
             v-model="param.refcode"
             placeholder="如有邀请码，请输入邀请码"
             class="input__n"
             v-show="true">
      <div class="register__content__xieyi">
        <div class="register__content__xieyi__tybtn"
             @click="isagree=!isagree">
          <img :src="tyImgUrl"
               alt="">
          <span>同意</span>
        </div>
        <div class="register__content__xieyi__rzxy"
             @click="showtest=!showtest">
          <span>《姿肽美入驻协议》</span>
        </div>
      </div>
      <button class="btn__n"
              :disabled="param.phone.length==0||param.code.length==0||!isagree"
              @click="regcheck(errors)">下一步</button>
      <div class="register__content__yiwen">
        <img src="../../assets/images/contact-customer-service-btn.png"
             alt="">
        <a :href="`tel:${$env.telPhone}`">如有问题，请联系客服</a>
      </div>
      <popup-xieyi @closepage="showtest=!showtest"
                   v-show="showtest"></popup-xieyi>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import inputValidate from '@/mixins/input'
import mixins from '@/mixins'
import popupXieyi from './popup-xieyi'
export default {
  name: 'register',
  data () {
    return {
      param: {
        phone: '',
        code: '',
        refcode: ''
      },
      showtest: false,
      isagree: false,
      countDown: {
        time: 0, // 计时当前秒数
        second: 60, // 倒计时 60秒
        disabled: false // 倒计时的时候是不可以点击
      },
      refCode: ''
    }
  },
  components: {
    popupXieyi
  },
  mounted () {
    // this.wxShare()
    let refcode = this.$route.query.refcode || this.$route.query.refCode || ''
    if (refcode) {
      this.refCode = refcode + ''
      this.param.refcode = this.refCode
    }
  },
  mixins: [inputValidate, mixins],
  methods: {
    BIND_USER: mapMutations(['BIND_USER']).BIND_USER,
    sendmsg: async function () {
      this.startCoundDown()
      try {
        await this.$ajax.get('/getSmsCode.sms', {
          phone: this.param.phone
        })
      } catch (e) {
        this.$toast(e)
        this.countDown.time = 0
      }
    },
    regcheck: async function (errors) {
      if (this.validateErrors(errors)) {
        return
      }
      try {
        await this.$ajax.put('/zMembers/updateMyPid.json', {
          ...this.param
        })
        this.$router.push({name: 'register-success'})
        this.user.phone = this.param.phone
        this.BIND_USER(this.user)
      } catch (e) {
        this.$toast(e)
      }
    },
    startCoundDown: function () {
      this.countDown.time = this.countDown.second
      this.countDown.disabled = true
      this.timer()
    },
    timer: function () {
      if (this.countDown.time > 0) {
        this.countDown.time--
        setTimeout(this.timer, 1000)
      } else {
        this.countDown.disabled = false
      }
    }
  },
  computed: {
    text: function () {
      return this.countDown.time > 0
        ? this.countDown.time + 's后重新获取'
        : '获取验证码'
    },
    tyImgUrl () {
      if (this.isagree) {
        return require('@image/icon-checked.png')
      } else {
        return require('@image/icon-unchecked.png')
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.register {
  .register__content {
    .msgcode {
      display: flex;
    }

    .register__content__yiwen {
      display: flex;
      width: 640px;
      margin-top: 13px;
      align-items: center;
      height: 40px;

      img {
        vertical-align: middle;
        width: 30px;
        height: 30px;
        margin-right: 10px;
      }

      a {
        line-height: 34px;
        font-size: 26px;
        color: #666666;
        text-align: left;
        vertical-align: middle;
        text-decoration: none;
      }
    }

    .register__content__xieyi {
      width: 640px;
      display: flex;
      justify-content: flex-start;
      flex-direction: row;
      padding-bottom: 34px;

      .register__content__xieyi__tybtn {
        display: flex;

        img {
          vertical-align: middle;
          width: 34px;
          height: 34px;
          margin-right: 10px;
        }

        span {
          font-size: 26px;
          color: #333333;
          text-align: left;
          line-height: 34px;
          vertical-align: middle;
        }
      }

      .register__content__xieyi__rzxy {
        display: flex;

        span {
          font-size: 26px;
          color: #215a94;
          text-align: left;
          line-height: 34px;
          vertical-align: middle;
        }
      }
    }

    .register__content__msgcode {
      width: 65%;
      height: 100%;
      padding-left: 15px;
      border: none;
    }

    .register__content__msgcodebtn {
      width: 35%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      text-align: center;
      font-family: PingFangSC-Regular;
      font-size: 26px;
      color: #ececec;
      border-radius: 0;
      background-color: RGBA(174, 42, 38, 1);
      border: 1px solid RGBA(174, 42, 38, 1);

      &:disabled {
        background-color: #ececec;
        border: 1px solid #ececec;
        color: #333333;
      }
    }

    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 75px;

    .register__content__bottom {
      width: 640p;
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
      flex-direction: row;

      .bottom__btn {
        font-size: 26px;
        color: #333333;
        text-align: left;
      }
    }
  }
}
</style>